<script setup>
import SvgIcon from "@/components/iconfont/SvgIcon.vue";
import buttonStore from "@/store/button.js";
import {computed} from "vue";
import useUserInfoStore from "@/store/user.js";

const userStore = useUserInfoStore();
const store = buttonStore()
const isCollapse = computed(() => store.isCollapse)
const width = computed(() => store.isCollapse ? '64px' : '200px')

// 检查是否有管理权限
const hasManagePermission = computed(() => {
  const userType = userStore.userInfo?.user_type
  return userType === 'ADMIN' || userType === 'MANAGER'
})
</script>
<template>
  <el-aside class="layout-aside" :width="width">
    <!--  router: 路由菜单，即菜单的每一项都可以映射到一个Vue Router的路由上
          active-text-color:菜单项被激活（即当前页面路由匹配到该菜单项对应的路由）时，菜单项的文字颜色将变为#ffd04b（一种亮黄色）
          text-color="#999": 菜单项未激活时的文字颜色设置为#999（一种灰色）
          :default-openeds="['1']": 这个属性用于设置默认展开的菜单项的索引
          :default-active="to" 页面加载时默认激活菜单的 index
    -->
    <div class="title" v-show="!isCollapse">
      <h2>TestHub 测试开发平台</h2>
      <h3>欢迎您：{{ userStore.userInfo.username }}</h3>
    </div>
    <div v-show="isCollapse" class="title-2">
      <h3>TestHub</h3>
    </div>
    <el-menu router
             :default-active="'/home'"
             active-text-color="#ffd04b"
             text-color="#999"
             background-color="#001529" :collapse="isCollapse" :collapse-transition="false">
      <el-menu-item index="/home">
        <el-icon>
          <SvgIcon icon-name="icon-shouye"></SvgIcon>
        </el-icon>
        <span>首页仪表盘</span>
      </el-menu-item>
      
      <el-menu-item index="/profile">
        <el-icon>
          <SvgIcon icon-name="icon-user"></SvgIcon>
        </el-icon>
        <span>个人信息</span>
      </el-menu-item>
      
      <el-menu-item index="/projects">
        <el-icon>
          <SvgIcon icon-name="icon-xiangmu"></SvgIcon>
        </el-icon>
        <span>项目管理</span>
      </el-menu-item>
      
      <el-menu-item index="/cases">
        <el-icon>
          <SvgIcon icon-name="icon-testcase"></SvgIcon>
        </el-icon>
        <span>测试用例</span>
      </el-menu-item>
      
      <el-menu-item index="/suites">
        <el-icon>
          <SvgIcon icon-name="icon-testsuite"></SvgIcon>
        </el-icon>
        <span>测试套件</span>
      </el-menu-item>
      
      <el-menu-item index="/logs">
        <el-icon>
          <SvgIcon icon-name="icon-rizhi"></SvgIcon>
        </el-icon>
        <span>日志管理</span>
      </el-menu-item>
      
      <!-- 管理员功能菜单 -->
      <el-sub-menu v-if="hasManagePermission" index="admin">
        <template #title>
          <el-icon>
            <SvgIcon icon-name="icon-user"></SvgIcon>
          </el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/admin/users">
          用户管理
        </el-menu-item>
        <el-menu-item index="/admin/departments">
          部门管理
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<style scoped lang="less">
.title,.title-2 {
  color: #ffd04b;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.img {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: flex-start;
}

.layout-aside {
  color: #ffd04b; /*设置元素内文本的颜色*/
  background-color: #001529; /*背景颜色*/
  padding: 0;
  height: 100vh; /* 设置高度为视口高度 */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止整体出现滚动条 */
}

.title, .el-menu {
  width: 100%;
}

/* 标题区域样式 */
.title, .title-2 {
  padding: 16px 0;
  flex-shrink: 0; /* 防止标题被压缩 */
}

/* 菜单区域样式 */
.el-menu {
  flex: 1;
  overflow-y: auto; /* 允许菜单区域滚动 */
  overflow-x: hidden; /* 隐藏水平滚动条 */
  
  /* 自定义滚动条样式 */
  &::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }
  }
  
  /* 隐藏滚动条但保持功能 */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* 确保菜单项内容不会被截断 */
:deep(.el-menu-item), :deep(.el-sub-menu__title) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 展开时的子菜单样式 */
:deep(.el-menu--collapse) {
  .el-sub-menu__title span {
    display: none;
  }
}

/* 确保图标和文字对齐 */
:deep(.el-menu-item), :deep(.el-sub-menu__title) {
  display: flex;
  align-items: center;
  
  .el-icon {
    margin-right: 8px;
    flex-shrink: 0;
  }
}
</style>